<template>
	<view>
		<view class="edit_con">
			<view class="img">
				<image :src="member.m_face">
				</image>
			</view>
			<view class="con" @click="funDialogNickName">
				<text>{{$t('nick_name')}}</text>
				<view>
					<label>{{member.m_nickName?member.m_nickName:''}}</label>
					<icon class="iconfont icon-xiangyou"></icon>
				</view>
			</view>
			<view class="con" @click="funDialogMobile">
				<text>{{$t('mobile')}}</text>
				<view>
					<label>{{member.m_mobile?member.m_mobile:''}}</label>
					<icon class="iconfont icon-xiangyou"></icon>
				</view>
			</view>
			<view class="con">
				<text>{{$t('gender')}}</text>
				<view>
					<picker @change="bindPickerSex" :value="index_sex" :range="array_sex">
						<label class="picker">
							{{index_sex==-1?$t('gender_alert'):(array_sex[index_sex])}}
						</label>
					</picker>
					<icon class="iconfont icon-xiangyou"></icon>
				</view>
			</view>
			<view class="con" @click="funHref('/pages/my/address/address')">
				<text>{{$t('address')}}</text>
				<view>
					<label>{{$t('click_add')}}</label>
					<icon class="iconfont icon-xiangyou"></icon>
				</view>
			</view>
		</view>
		<!--弹窗（修改昵称）-->
		<view class="modal-mask" @click="funModalNickName" @touchmove="preventTouchMove" v-if="showModalNickName">
		</view>
		<view class="modal-dialog" v-if="showModalNickName">
			<view class="modal-title">{{$t('nick_name_update')}}</view>
			<view class="modal-content">
				<view class="modal-input">
					<input placeholder-class="input-holder" type="text" maxlength="30"
						:value="m_nickName!=''?m_nickName:member.m_nickName" @input="iNickName" class="input"
						:placeholder="$t('nick_name_alert')"></input>
				</view>
			</view>
			<view class="modal-footer">
				<view class="btn-cancel" @click="funCancelNickName" data-status="cancel">{{$t('cancel')}}</view>
				<view class="btn-confirm" @click="funConfirmNickName" data-status="confirm">{{$t('sure')}}</view>
			</view>
		</view>
		<!--弹窗（修改手机）-->
		<view class="modal-mask" @click="funModalMobile" @touchmove="preventTouchMove" v-if="showModalMobile">
		</view>
		<view class="modal-dialog" v-if="showModalMobile">
			<view class="modal-title">{{$t('mobile_update')}}</view>
			<view class="modal-content">
				<view class="modal-input">
					<input placeholder-class="input-holder" type="text" maxlength="30"
						:value="m_mobile!=''?m_mobile:member.m_mobile" @input="iMobile" class="input"
						:placeholder="$t('mobile_alert')"></input>
				</view>
			</view>
			<view class="modal-footer">
				<view class="btn-cancel" @click="funCancelMobile" data-status="cancel">{{$t('cancel')}}</view>
				<view class="btn-confirm" @click="funConfirmMobile" data-status="confirm">{{$t('sure')}}</view>
			</view>
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: true, //是否正在加载
				member: {}, //会员
				m_nickName: "", //昵称
				m_mobile: "", //手机号
				showModalNickName: false,
				showModalMobile: false,
				index_sex: 0, //性别 0：未知、1：男、2：女
				array_sex: [this.$t('gender_alert'), this.$t('male'), this.$t('female')], //数组 - 性别
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('details')
			})
		},
		onLoad() {
			var _this = this;

			//获取会员信息
			_this.getMember();
		},
		methods: {
			getMember: function() { //获取会员信息
				var _this = this;
				
				_this.fun_request("/Api/Member/Get", {}, function(res) {
					_this.member = res.data;
					_this.index_sex = _this.member.m_gender;
					//加载完成
					_this.isLoading = false;
				});
			},
			funDialogMobile: function() { //弹窗 - 手机
				this.showModalMobile = true;
			},
			funModalMobile: function() { //隐藏模态对话框
				this.showModalMobile = false;
			},
			funCancelMobile: function() { //对话框取消按钮点击事件
				this.funModalMobile();
			},
			funConfirmMobile: function() { //对话框确认按钮点击事件
				var _this = this;
				_this.isLoading = true;
			
				//执行编辑
				_this.fun_request("/Api/Member/Modify", {
					m_mobile: _this.m_mobile
				}, function(res) {
					_this.member.m_mobile = _this.m_mobile;
					//加载完成
					_this.isLoading = false;
					_this.funModalMobile();
				});
			},
			funDialogNickName: function() { //弹窗 - 昵称
				this.showModalNickName = true;
			},
			funModalNickName: function() { //隐藏模态对话框
				this.showModalNickName = false;
			},
			funCancelNickName: function() { //对话框取消按钮点击事件
				this.funModalNickName();
			},
			funConfirmNickName: function() { //对话框确认按钮点击事件
				var _this = this;
				_this.isLoading = true;

				//执行编辑
				_this.fun_request("/Api/Member/Modify", {
					m_nickName: _this.m_nickName
				}, function(res) {
					_this.member.m_nickName = _this.m_nickName;
					//加载完成
					_this.isLoading = false;
					_this.funModalNickName();
				}, false, function(res) {
					_this.funModalNickName();
				});
			},
			bindPickerSex: function(e) { //性别选择
				var _this = this;
				_this.index_sex = e.detail.value;
				if (_this.index_sex == 0) return;

				//执行编辑
				_this.fun_request("/Api/Member/Modify", {
					m_gender: _this.index_sex
				}, function(res) {
					_this.member.m_gender = _this.index_sex;
					//加载完成
					_this.isLoading = false;
				}, false, function(res) {
					//加载完成
					_this.isLoading = false;
				});
			},
			getPhoneNumber: function(e) { //获取授权手机号
				var _this = this;

				uni.login({
					success: (res) => {
						// console.log("code:" + res.code);
						// console.log("errMsg:" + e.detail.errMsg);
						// console.log("iv:" + e.detail.iv);
						// console.log("encryptedData:" + e.detail.encryptedData);
						_this.isLoading = true;

						//提交
						_this.fun_request("/Handler/Adult/Member_Applet.ashx", {
							type: "get_phone",
							code: res.code,
							encrypteData: e.detail.encryptedData,
							iv: e.detail.iv
						}, function(res) {
							//执行编辑
							_this.fun_request("/Handler/Adult/Member_Applet.ashx", {
								type: "update",
								m_mobile: res.phoneinfo.purePhoneNumber
							}, function(res) {
								_this.member = res.member;
								//加载完成
								_this.isLoading = false;
							}, false, function(res) {
								_this.fun_showToast(res.msg);
								//加载完成
								_this.isLoading = false;
							});
						});
					}
				})
			},
			funHref: function(url) { //跳转
				this.fun_navigateTo(url);
			},
			iNickName(e) {
				this.m_nickName = e.detail.value
			},
			iMobile(e) {
				this.m_mobile = e.detail.value
			},
			preventTouchMove: function() { //弹出框蒙层截断touchmove事件

			}
		}
	}
</script>

<style>
	.edit_con {
		display: block;
		padding: 50rpx 5%;
		width: 100%;
	}

	.edit_con .con {
		display: block;
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}

	.edit_con .con text {
		float: left;
		font-size: 34rpx;
		color: #303133;
	}

	.edit_con .con view {
		float: right;
		color: #c0c4cc;
	}

	.edit_con .con view label {
		float: left;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.edit_con .con view button {
		float: left;
		width: auto;
		padding: 0;
		line-height: 110rpx;
		font-size: 28rpx;
		color: #c0c4cc;
		font-weight: normal;
		background-color: transparent;
		margin-right: 10rpx;
		border: 0;
	}

	.edit_con .con view button::after {
		border: 0;
	}

	.edit_con .con view icon {
		float: left;
		font-size: 32rpx;
	}

	.edit_con .con view picker {
		float: left;
		width: 200rpx;
	}

	.edit_con .con view picker label {
		float: right;
		width: 100%;
		text-align: right;
	}

	.edit_con .img {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.edit_con .img image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}


	.show-btn {
		margin-top: 100rpx;
		color: #22cc22;
	}

	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 9000;
		color: #fff;
	}

	.modal-dialog {
		width: 540rpx;
		overflow: hidden;
		position: fixed;
		top: 50%;
		left: 0;
		z-index: 9999;
		background: #f9f9f9;
		margin: -180rpx 105rpx;
		border-radius: 36rpx;
	}

	.modal-title {
		padding-top: 50rpx;
		font-size: 36rpx;
		color: #030303;
		text-align: center;
	}

	.modal-content {
		padding: 50rpx 32rpx;
	}

	.modal-input {
		display: flex;
		background: #fff;
		border: 2rpx solid #ddd;
		border-radius: 4rpx;
		font-size: 28rpx;
	}

	.input {
		width: 100%;
		height: 82rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #333;
	}

	input-holder {
		color: #666;
		font-size: 28rpx;
	}

	.modal-footer {
		display: flex;
		flex-direction: row;
		height: 86rpx;
		border-top: 1px solid #dedede;
		font-size: 34rpx;
		line-height: 86rpx;
	}

	.btn-cancel {
		width: 50%;
		color: #666;
		text-align: center;
		border-right: 1px solid #dedede;
	}

	.btn-confirm {
		width: 50%;
		color: #ec5300;
		text-align: center;
	}
</style>
